
:root {
    --color-selected: #0075f3;
    --color-red:#ee2367;
    --color-pink:#f9b4b9;

    --color-popup:#ecf0f8;
    --color-popup-border:#d1d8e9;
}

body * {
    font-family:"Trebuchet MS", "sans-serif";
}

.popup {
    width:300px;
    height:350px;
    background-color:var(--color-popup);
    position:fixed;
    z-index:100;
    border:1px solid var(--color-popup-border);
    border-radius:3px;
    opacity:0.96;
    display:flex;
    flex-direction: column;
    box-shadow: 0 0 5px gray;
    overflow:hidden;
}

.popup .title {
    display:flex;
    align-items:center;
    font-size:larger;
    padding:0.25rem;
}

.popup .content {
    background-color:white;
    margin: 0.5rem;
    flex-grow: 1;
    border:1px solid var(--color-popup-border);
    border-radius:3px;
}

#toggles {
    display:flex;
    position:absolute;
    left:50%;
    top:0;
    transform: translateX(-50%);
}

#toggles div {
    margin: 0 2rem;
    padding: 0.25rem;
    color: white;
    background-color: #3d8a3d;
    border-radius: 3px;
    cursor: pointer;
}

#toggles div[data-hidden='true'] {
    background-color:orangered;
}

#successors {
    right:2rem;
    top:2.5rem;
}

#predecessors {
    right:2rem;
    bottom:2.5rem;
}

#neighbours {
    left:2rem;
    bottom:2.5rem;
}

#siblings {
    left:2rem;
    top:2.5rem;
}


#main {
    width:100vw;
    height:100vh;
    position:relative;
}

#canvas {
    width:100%;
    height:100%;
}

.jtk-node {
    border:2px solid;
    white-space: nowrap;
}
.base {
    color:black;
    border-radius:3px;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0.5rem;
}

.formula {
    border-color:var(--color-red);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.formula .title {
    border-bottom: 2px solid var(--color-red);
    padding:0.5rem;
}

.formula-value {
    padding:0.5rem;
    text-align:center;
}

.jtk-surface-selected-element {
    outline:2px solid var(--color-selected);
    outline-offset:0.5rem;
}


[data-c='R'] {
    color:var(--color-red);
}

[data-c='-'] {
    color:var(--color-pink);
}
